<template>
  <div>
    <n-grid :cols="24">
      <n-grid-item span="24">
        <detail-page-header :title="variant.name">
          <n-button
            type="primary"
            v-if="showType === 'hasSn'"
            @click="handleShowTransactionLogs"
          >
            交易流水
          </n-button>
        </detail-page-header>
        <div class="mt-[16px]"></div>
        <HasSnProduct
          v-if="showType === 'hasSn'"
          :id="props.id"
          :inventory-detail="inventoryDetail"
          ref="hasSnProductRef"
        />
        <NoSnProduct
          v-else-if="showType === 'noSn'"
          :id="props.id"
          :inventory-detail="inventoryDetail"
        />
      </n-grid-item>
    </n-grid>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { get } from "lodash-es";
import { getInventoryDetail } from "@/api/inventory/inventory.api";
import { InventoryDetailVO } from "@/types/model/inventory/vos/inventory.vo";
import { HasSnProduct, NoSnProduct } from "@/components/biz/inventory/index";
import { snStatus } from "@/enums/sn/snStatusEnum";

interface Props {
  id: string;
}

const showType = ref<"" | "hasSn" | "noSn">("");
const inventoryDetail = ref<InventoryDetailVO>({} as InventoryDetailVO);
const hasSnProductRef: any = ref(null);

const variant = computed(() => {
  return get(inventoryDetail.value, "variants") || {};
});

const props = defineProps<Props>();

const handleGetDetail = async (inventoryId: string) => {
  const result = await getInventoryDetail(inventoryId);
  inventoryDetail.value = get(result, "result") || {};
  const hasSn = get(result, "result.product.hasSerialNumber");
  console.log(`hasSn:${hasSn}`);
  if (hasSn === "0") {
    showType.value = "noSn";
  } else if (hasSn === "1") {
    showType.value = "hasSn";
  }
};

const handleShowTransactionLogs = () => {
  if (hasSnProductRef.value) {
    hasSnProductRef.value?.showVariantTransactionModal();
  }
};

const init = () => {
  if (props.id) {
    handleGetDetail(props.id);
  }
};

onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
